import { usePersonStore } from '@/store/person'
import { useHomeStore } from '@/store/home'
import { computed, reactive, ref, toRefs, watch, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { PersonDetail } from '@/types/person'
import { IdLabel, IdName } from '@/types/global'
import { useGlobalEffect } from '@/hooks/useGlobalEffect'

export interface RightBtn {
  isEdit: boolean
  rightTxt: string
}

export const useDetailEffect = () => {
  const router = useRouter()
  const personStore = usePersonStore()
  const homeStore = useHomeStore()

  const {
    personCategoryList,
  } = useGlobalEffect()

  const { isolate_status_obj } = personStore
  const sexList = personStore.sexList
  const loading = ref(true)

  const resetDialog = () => {
    personStore.setShowAcceptDialog(false)
    personStore.setShowReleaseDialog(false)
    personStore.setShowRejectedDialog(false)
    personStore.setShowExtendDialog(false)
    personStore.setShowHouseholdDialog(false)
    personStore.setShowRelieveDialog(false)
  }

  resetDialog()

  const id = router.currentRoute.value.query.id
  personStore.getPersonInfo(id as string)

  const handleAccept = () => {
    personStore.setShowAcceptDialog(true)
  }
  const handleRelease = () => {
    personStore.setShowReleaseDialog(true)
  }
  const handleRejected = () => {
    personStore.setShowRejectedDialog(true)
  }
  const handleExtend = () => {
    personStore.setShowExtendDialog(true)
  }
  const handleHousehold = () => {
    personStore.setShowHouseholdDialog(true)
  }
  const handleRelieve = () => {
    personStore.setShowRelieveDialog(true)
  }

  // 处理详情
  const detail = computed(() => personStore.personInfo)
  const community_id = detail.value.community_id
  const mch_id = detail.value.mch_id
  let form = ref()
  watch(
    detail,
    (newValue) => {
      form.value = { ...newValue }
      form.value.community_id = newValue.community_name
      form.value.mch_id = newValue.mch_name

      // 需要特殊处理隔离状态、社区、小区、隔离日期
      if (newValue.isolate_status) {
        form.value.isolate_status = isolate_status_obj[newValue.isolate_status as string]
      }
      if (newValue.person_category) {
        if(personCategoryList) {
          const ret = personCategoryList.value.filter(item => item.id == newValue.person_category)[0]
          if(ret) form.value.person_category = ret.name
        }
      }
      form.value.dateRange = `${newValue.isolate_starttime} 至 ${newValue.isolate_endtime}`
    },
    { deep: true, immediate: true }
  )

  const query = reactive<PersonDetail>({
    isolate_reason: detail.value.isolate_reason,
    isolate_status: detail.value.isolate_status,
    community_id: community_id,
    mch_id: mch_id,
    isolate_starttime: detail.value.isolate_starttime,
    isolate_endtime: detail.value.isolate_endtime,
    person_category: detail.value.person_category,
  })

  const communityList = homeStore.communityList
  const communityChildList = ref<IdLabel[]>([])

  const showCommunityPicker = ref(false) // 社区
  const onCommunityConfirm = async (data: IdLabel) => {
    const { id, label } = data
    form.value.community_id = label
    query.community_id = id
    showCommunityPicker.value = false
    communityChildList.value = homeStore.communityALlChild[id] // 村/小区赋值
    // 5包责任人
    let result = await homeStore.getEnveLopInfo(id)
    console.log(result)
    for (const iterator of Object.keys(result)) {
      if (
        iterator == 'id' ||
        iterator == 'created_at' ||
        iterator == 'updated_at' ||
        iterator == 'name' ||
        iterator == 'deleted_at' ||
        iterator == 'remark'
      ) {
        continue
      }
      form.value[iterator] = result[iterator]
    }
    console.log(form.value)
  }

  const showCommunityChildPicker = ref(false) // 小区
  const onCommunityChildConfirm = (data: IdLabel) => {
    const { id, label } = data
    form.value.mch_id = label
    query.mch_id = id
    showCommunityChildPicker.value = false
  }

  const showSubcontractorPicker = ref(false) // 分包单位
  const onSubcontractorConfirm = (data: IdName) => {
    const { id, name } = data
    form.value.subcontractors_id = name
    query.subcontractors_id = id
    showSubcontractorPicker.value = false
  }

  const showReasonPicker = ref(false) // 隔离原因
  const onReasonConfirm = (data: IdName) => {
    const { id, name } = data
    form.value.isolate_reason = name
      query.isolate_reason = name
    showReasonPicker.value = false
  }

  const isolate_status_list = computed(() => personStore.isolate_status)
  const showIsolateStatusPicker = ref(false) // 隔离状态
  const onIsolateStatusConfirm = (data: IdLabel) => {
    const { id, label } = data
    form.value.isolate_status = label
    query.isolate_status = id
    showIsolateStatusPicker.value = false
  }

  const showCalendar = ref(false) // 隔离日期
  const onCalendarConfirm = (values: any) => {
    const [start, end] = values
    showCalendar.value = false
    const isolate_starttime = `${dayjs(start).format('YYYY-MM-DD')}`
    const isolate_endtime = `${dayjs(end).format('YYYY-MM-DD')}`
    
    query.isolate_starttime = isolate_starttime
    query.isolate_endtime = isolate_endtime

    form.value.dateRange = `${isolate_starttime} 至 ${isolate_endtime}`
  }

  const showCategoryPicker = ref(false) // 人员分类
  const onCategoryConfirm = (data: IdName) => {
    const { id, name } = data
    form.value.person_category = name
    query.person_category = id
    showCategoryPicker.value = false
  }

  setTimeout(() => {
    loading.value = false
  }, 500)

  return {
    id,
    form,
    query,
    detail,
    handleAccept,
    handleRelease,
    handleRejected,
    handleExtend,
    handleHousehold,
    handleRelieve,
    ...toRefs(form),
    communityList,
    showCommunityPicker,
    onCommunityConfirm,
    communityChildList,
    showCommunityChildPicker,
    onCommunityChildConfirm,
    showSubcontractorPicker,
    onSubcontractorConfirm,
    showReasonPicker,
    onReasonConfirm,
    isolate_status_list,
    showIsolateStatusPicker,
    onIsolateStatusConfirm,
    showCalendar,
    onCalendarConfirm,
    sexList,
    loading,
    showCategoryPicker,
    onCategoryConfirm,
    personCategoryList
  }
}
